<template>
  <div class="box">
    <!-- 查询区域 -->
    <!-- <vxe-toolbar> -->
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 运单号 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="运单号">
              <el-input v-model="listQuery.orderDetailNumber" placeholder="请输入主单号查询"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="货物名称">
              <el-input v-model="listQuery.cargoName" placeholder="请输入货物名称"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="车牌号">
              <el-input v-model="listQuery.licenseNumber" placeholder="请输入车牌号"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 开单日期 -->
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <el-form-item label="开单日期">
            <el-col :span="12">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="listQuery.searchBeginDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col :span="12">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="listQuery.searchEndDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签收日期">
            <el-col :span="12">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="listQuery.searchBeginSignDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col :span="12">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="listQuery.searchEndSignDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 结算部分 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="结算状态">
              <el-select v-model="listQuery.statement" placeholder="--请选择--">
                <el-option label="未结算" value="0"></el-option>
                <el-option label="已结算" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-form-item label="收款支付方式" label-width="150px">
              <el-select v-model="listQuery.payStatus" placeholder="--请选择--">
                <el-option label="未支付" value="0"></el-option>
                <el-option label="在线支付" value="1"></el-option>
                <el-option label="余额支付" value="2"></el-option>
                <el-option label="现金支付" value="3"></el-option>
                <el-option label="暂不支付" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-form-item label="上游运算结算方式" label-width="150px">
              <el-select v-model="listQuery.deliveryFeeType" placeholder="--请选择--">
                <el-option label="发货人现金支付" value="0"></el-option>
                <el-option label="收货人现金支付" value="1"></el-option>
                <el-option label="发货人在线支付" value="2"></el-option>
                <el-option label="收货人在线支付" value="3"></el-option>
                <el-option label="发货人月结" value="4"></el-option>
                <el-option label="收货人月结" value="5"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="14">
          <el-form-item>
            <el-button type="primary" size="small" @click="getFinancialList()" class="queryMainBtn">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- </vxe-toolbar> -->
    <!-- 表格部分 -->
    <vxe-table
      border
      resizable
      stripe
      highlight-hover-row
      highlight-current-row
      show-overflow
      ref="xTable"
      height="300"
      align="center"
      :data="tableData"
    >
      <vxe-table-column min-width="160" field="order_detail_number" title="运单号"></vxe-table-column>
      <vxe-table-column min-width="160" field="status" title="运单状态" sortable :formatter="formatterStatus"></vxe-table-column>
      <vxe-table-column min-width="160" field="reserveTime" title="运单图片" sortable></vxe-table-column>
      <vxe-table-column min-width="160" field="gmt_created" title="下单时间" show-overflow></vxe-table-column>
      <vxe-table-column min-width="160" field="vehicle_number" title="接货车牌"></vxe-table-column>
      <vxe-table-column min-width="160" field="cargo_name" title="货物名称"></vxe-table-column>
      <vxe-table-column min-width="160" field="shipment_name" title="入驻商姓名"></vxe-table-column>
      <vxe-table-column min-width="160" field="shipment_phone" title="入驻商电话"></vxe-table-column>
      <vxe-table-column min-width="160" field="delivery_name" title="收货方姓名"></vxe-table-column>
      <vxe-table-column min-width="160" field="delivery_phone" title="收货方电话"></vxe-table-column>
      <vxe-table-column min-width="160" field="delivery_address" title="收货方地址"></vxe-table-column>
      <vxe-table-column min-width="160" field="fill_time" title="装货日期"></vxe-table-column>
      <vxe-table-column min-width="160" field="sign_time" title="签收时间"></vxe-table-column>
      <vxe-table-column min-width="160" field="upstream_cost" title="上游运费"></vxe-table-column>
      <vxe-table-column min-width="160" field="delivery_fee_type" title="上游运费结算方式" :formatter="formatterDeliveryFeeType"></vxe-table-column>
      <vxe-table-column min-width="160" field="pay_status" title="收款支付方式" :formatter="formatterPayStatus"></vxe-table-column>
      <vxe-table-column min-width="160" field="driver_freight" title="司机运费"></vxe-table-column>
      <vxe-table-column min-width="160" field="collection_delivery" title="代收款"></vxe-table-column>
      <vxe-table-column min-width="160" field="collection_pay" title="代收款结算方式"></vxe-table-column>
      <vxe-table-column min-width="450" title="操作" fixed="right">
        <template slot-scope="scope">
<!--          <el-tag size="small" @click="settlementListPage">结算记录</el-tag>-->
          <el-tag size="small" v-show="scope.row.buttons.modifyisSettlementShowShow" type="success" @click="settlementPage">结算</el-tag>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 结算记录对话框 -->
<!--    <template>-->
<!--      <settlementList ref="settlementList" />-->
<!--    </template>-->

    <!-- 分页功能 -->
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
    import Vue from "vue";
    import "xe-utils";
    import XEUtils from 'xe-utils'
    import VXEUtils from 'vxe-utils'
    import VXETable from "vxe-table";
    import "vxe-table/lib/index.css";
    import {getFinancialList} from "@/api/ctms";
    // import settlementList from './components/settlementList.vue'

    Vue.use(VXETable, XEUtils, VXEUtils);

    export default {
        name: "dispatchCars",
        components: {
            // settlementList
        },
        created() {
            this.getFinancialList()
        },
        data() {
            return {
                loading: false,
                form: {},
                tableData: [],
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                    orderDetailNumber: "",
                    cargoName: "",
                    licenseNumber: "",
                    searchBeginDate: "",
                    searchEndDate: "",
                    searchBeginSignDate: "",
                    searchEndSignDate: "",
                    statement: "",
                    payStatus: "",
                    deliveryFeeType: ""
                }
            };
        },
        methods: {
            // 获取零担结算列表
            getFinancialList() {
                this.loading = true;
                return new Promise(resolve => {
                    getFinancialList(this.listQuery).then(response => {
                        console.log(response);
                        this.listQuery.total = response.data.total
                        this.tableData = response.data.records
                        // 判断表格操作 tag标签是否显示
                        for (let item in this.tableData) {
                            var buttons = {}
                            var isSettlementShow = false //结算按钮展示
                            if (this.tableData[item].is_settle != 1 || this.tableData[item].is_balance != 1) {
                                isSettlementShow = true;
                            }
                            this.tableData[item]["buttons"] = {
                                modifyisSettlementShowShow: isSettlementShow
                            }
                        }
                        this.loading = false;
                    })
                })
            },
            // 派单对话框
            dispatchCars() {
                this.$refs.dispOrder.dispatchVisible = true
                this.$refs.dispOrder.driverList()
            },
            // 分页handle
            handlePageChange({currentPage, pageSize}) {
                this.listQuery.pageNum = currentPage
                this.listQuery.pageSize = pageSize
                this.dispathCarsList()
            },
            // 列表展示status字段翻译
            formatterStatus({ cellValue }) {
                switch (cellValue) {
                    case 0:
                        return "未接单";
                        break;
                    case 1:
                        return "已接单";
                        break;
                    case 2:
                        return "已转出";
                        break;
                    case 3:
                        return "已签收";
                        break;
                    case 4:
                        return "转干线";
                        break;
                    case 5:
                        return "转同城";
                        break;
                    default:
                        return "其他状态";
                        break;
                }
            },
            // 列表展示payStatus字段翻译
            formatterPayStatus({ cellValue }) {
                switch (cellValue) {
                    case 0:
                        return "未支付";
                        break;
                    case 1:
                        return "在线支付";
                        break;
                    case 2:
                        return "余额支付";
                        break;
                    case 3:
                        return "现金支付";
                        break;
                    case 4:
                        return "暂不支付";
                        break;
                    default:
                        return "";
                        break;
                }
            },
            // 列表展示deliveryFeeType字段翻译
            formatterDeliveryFeeType({ cellValue }) {
                switch (cellValue) {
                    case 0:
                        return "发货人现金支付";
                        break;
                    case 1:
                        return "收货人现金支付";
                        break;
                    case 2:
                        return "发货人在线支付";
                        break;
                    case 3:
                        return "收货人在线支付";
                        break;
                    case 4:
                        return "发货人月结";
                        break;
                    case 5:
                        return "收货人月结";
                        break;
                    default:
                        return "";
                        break;
                }
            },
            // // 结算记录对话框
            // settlementListPage () {
            //     this.$refs.settlementList.settlementListVisible = true
            //     this.$refs.settlementList.settlementList()
            // }
        },
    }
</script>

<style lang="scss" scoped>
  .box {
    padding: 10px 10px 10px 0;
  }

  .queryMainBtn {
    width: 80px;
    margin: -5px 0 0 -50px;
    font-weight: bold;
  }

</style>
